<template>
  <div id="layout-container">
    <section id="layout-aside" :class="{ 'is-immersive': isImmersive }" :style="{ width: collaps ? ASIDE_CLOSE : ASIDE_DEFAULT }">
      <Aside />
    </section>
    <section id="layout-content">
      <section id="layout-header"><Header /></section>
      <section id="layout-main"><router-view /></section>
    </section>
  </div>
</template>
<script setup>
  import Header from "./components/header/index.vue"
  import Aside from "./components/aside/index.vue"
  import { computed } from "vue"
  import { useCollaps } from "@/hook"
  import { ASIDE_DEFAULT, ASIDE_CLOSE } from "@/constant"
  const { useGetCollasp, useIsImmersive } = useCollaps()
  const collaps = computed(() => useGetCollasp())
  const isImmersive = computed(() => useIsImmersive())
</script>
<style lang="scss" scoped></style>
